<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="blue">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="daohang">
      <van-icon name="passed" color="red" />
      <span> 30天无忧退货 </span>
      <van-icon name="passed" color="red" />
      <span> 48小时快递速退 </span>
      <van-icon name="passed" color="red" />
      <span> 满88元包邮 </span>
    </div>
   
    <div class="xinxi">
      <span>{{ info.name }}</span>
      <p>{{ info.goods_brief }}</p>
      <div>￥{{ info.retail_price }}元</div>
    </div>

     <div class="CommodityParameters">
        <h2>商品参数</h2>
        <div class="xiangq" v-for="item in CommodityParameters" :key="item.id">
            <p>{{item.name}}</p>
            <span>{{item.value}}</span>
        </div>
    </div>
    <h1>---产品详情---</h1>
    <div id="as" v-html="info.goods_desc"></div>
    <ul>
      <li v-for="(item, index) in answer" :key="item.id">
        <h2>{{ index + 1 }}.{{ item.question }}</h2>
        <p>{{ item.answer }}</p>
      </li>
    </ul>
    <h1>---相关产品---</h1>
    <div class="bader">
      <ul>
        <li v-for="item in goodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <p>{{ item.name }}:</p>
          <span>￥{{ item.retail_price }}元</span>
        </li>
      </ul>
    </div>
    <van-icon class="dingbu" name="good-job-o" @click="fhdb" />
    <van-icon class="fanhui" name="revoke" @click="fanhui" />
    <van-icon class="fenxiang" name="share" @click="fenxiang" />
    <van-goods-action>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="sum"  @click="clickcart"/>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="joinFn"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @add-cart="onAddCartClicked"
      ref="arr"
    />

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
import { productDetail, related ,cartadd,goodscount} from "@/api/productDetail.js";
export default {
  name: "",
  data() {
    return {
      badge:0,//徽标
      sum:'',//产品数量
      productList:'',//产品id
      gallery: [], //轮播数据
      info: [], //详情图片
      answer: [], //运费介绍
      goodsList: [], //相关产品
      showShare: false, //是否显示分享面板
      CommodityParameters:[],//商品参数数据
      //分享面班的数据
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      show: false, //是否显示购物车
      sku: {
        tree: [], // 商品规格类目数组目前没有类目默认空
        price: "", //价格
        stock_num: 0, //当前 sku 组合对应的库存
      },
      goods: {
        picture: "", // 默认商品 sku 缩略图
      },
    };
  },
  created() {
    //   console.log(this.$route.query.id);
    productDetail({ id: this.$route.query.id }).then((res) => {
        // console.log(res);
      this.gallery = res.data.gallery;
      this.info = res.data.info;
      this.answer = res.data.issue;
      this.CommodityParameters=res.data.attribute
      this.sku.price=res.data.info.retail_price
      this.sku.stock_num=res.data.info.goods_number
      this.goods.picture=res.data.info.list_pic_url
      this.productList=res.data.productList[0].id
      // console.log(this.productList);
      //   console.log(res.data.info.goods_desc);
    }),
      related({ id: this.$route.query.id }).then((res) => {
        // console.log(res);
        this.goodsList = res.data.goodsList;
      }),
       goodscount().then(res=>{
        console.log(res);
        this.sum=res.data.cartTotal.goodsCount
      })
      
  },
  methods: {
    //点击跳转购物车
    clickcart(){
      this.$router.push('/cart') 
    },
    //点击返回顶部
    fhdb() {
      document.documentElement.scrollTop = 0;
    },
    //点击返回搜索页
    fanhui() {
      this.$router.push("/home/searchPopup");
    },
    //   点击分享
    fenxiang() {
      this.showShare = true;
    },
    //点击购物车里面的购物车
    onAddCartClicked() {
     console.log(this.$refs.arr.getSkuData().selectedNum);
      // console.log(this.productList);
      cartadd({
       
        goodsId:this.$route.query.id,
        productId:this.productList,
        number:this.$refs.arr.getSkuData().selectedNum
        }).then(res=>{
          console.log(res);
          this.sum=res.data.cartTotal.goodsCount
           this.$toast.success("添加成功");
          this.show=false
      })
    },
    //点击购物车
    joinFn() {
      this.show = true;
    },
  },
};
</script>
<style scoped lang="less">
img {
  width: 375px;
  height: 375px;
}
.daohang {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  margin-top: 10px;
}
.xinxi {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 8px;
  margin-top: 20px;
  p {
    padding: 5px;
  }
  div {
    color: red;
    padding-bottom: 10px;
  }
}
/deep/#as {
  p {
    img {
      width: 375px;
    }
  }
}
li {
  list-style: disc;
  text-indent: 20px;
  h2 {
    font-size: 14px;
  }
  p {
    margin-top: 5px;
    font-size: 12px;
    text-indent: 20px;
    text-align: center;
  }
}
h1 {
  margin-top: 20px;
  text-align: center;
  font-size: 18px;
}
.bader {
  padding-bottom: 50px;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      height: 215px;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 100%;
        height: 80%;
      }
      p {
        margin-top: 5px;
        font-size: 14px;
      }
      span {
        margin-top: 5px;
        color: red;
        font-size: 14px;
      }
    }
  }
}
.dingbu {
  position: fixed;
  bottom: 60px;
  right: 10px;
  font-size: 30px;
  color: red;
}
.fanhui {
  position: fixed;
  top: 20px;
  left: 5px;
  font-size: 30px;
  // color: red;
  background: black;
  color: white;
  border-radius: 20px;
}
.fenxiang {
  position: fixed;
  top: 20px;
  right: 5px;
  font-size: 30px;
  background: black;
  color: white;
  border-radius: 20px;
}
.van-sku {
  background: red;
}
.CommodityParameters{
    
    h2{
        font-size: 14px;
    }
    .xiangq{
        width: 80%;
        font-size: 16px;
        margin-top: 5px;
        display: flex;
        background: rgb(233, 226, 233); 
        box-sizing: border-box;
        border-radius: 5px;
        margin: auto;
        margin-top: 5px;
        p{
            width: 80px;
            // background: red;
            text-align: right;
            margin-right: 10px;
        }
    }
}
</style>